<template>
	<view class="home-container">
		<view class="status-bar"></view>

		<!-- 主推广区域 -->
		<view class="main-promo">
			<image src="@/static/images/icon-01.png" mode="aspectFit"></image>
		</view>

		<!-- 功能卡片网格 -->
		<view class="cards-grid">
			<!-- 供货单打印 -->
			<view class="card card-supply" @click="handleSupplyPrint">
				<image src="@/static/images/icon-02.png" mode="aspectFit"></image>
			</view>

			<view class="right-box">
				<!-- 标签打印 -->
				<view class="card card-label" @click="handleLabelPrint">
					<image src="@/static/images/icon-03.png" mode="aspectFit"></image>
				</view>

				<!-- 物流单打印 -->
				<view class="card card-logistics" @click="handleLogisticsPrint">
					<image src="@/static/images/icon-05.png" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 其他功能 -->
		</view>

		<!-- 城市仓提货单按钮 -->
		<view class="pickup-button" @click="handlePickupPrint">
			<image src="/static/images/icon-04.png" mode="aspectFit"></image>
		</view>

		<!-- 底部版权信息 -->
		<view class="footer">
			<text class="copyright">Copyright©2025北京鲜立方农业有限公司</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		handleSupplyPrint() {
			uni.showToast({
				title: '供货单打印',
				icon: 'none'
			});
			this.toNav('success/success');
		},
		handleLabelPrint() {
			uni.showToast({
				title: '标签打印',
				icon: 'none'
			});
			this.toNav('success/success');
		},
		handleLogisticsPrint() {
			uni.showToast({
				title: '物流单打印',
				icon: 'none'
			});
			this.toNav('success/success');
		},
		handleOtherFunction() {
			uni.showToast({
				title: '其他功能',
				icon: 'none'
			});
			this.toNav('success/success');
		},
		handlePickupPrint() {
			uni.showToast({
				title: '城市仓提货单打印',
				icon: 'none'
			});
			this.toNav('success/success');
		}
	}
};
</script>

<style lang="scss">
.home-container {
	width: 100%;
	min-height: 100vh;
	background: url('/static/images/bg-2.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	overflow: hidden;
	background-color: #016ddd;
	position: relative;
}
.status-bar {
	height: 80px;
	background: transparent;
}

.header {
	text-align: center;
	padding: 40rpx 0 60rpx;

	.header-title {
		color: #ffffff;
		font-size: 36rpx;
		font-weight: bold;
	}
}

.main-promo {
	margin: 0 30rpx 60rpx;
	height: 340rpx;
	image {
		width: 100%;
		height: 100%;
		// box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.3));
		transition: transform 0.3s ease;
	}
}

.cards-grid {
	display: flex;
	// flex-wrap: wrap;
	justify-content: space-between;

	margin: 0 30rpx 40rpx;

	.card {
		position: relative;
		height: 200rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: transform 0.3s ease;
		&:active {
			transform: scale(0.95);
		}

		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.3));
		}

		.card-text {
			color: #ffffff;
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
		}
	}
	.right-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 48%;
		// border: 1px solid #000;
	}

	.card-supply {
		// background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
		width: 48%;
		height: 442rpx;
		// border: 1px solid #000;
	}

	.card-label {
		// background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
		width: 100%;
		height: 45%;
		image {
			width: 100%;
			height: 100%;
		}
		// border: 1px solid #000;
	}

	.card-logistics {
		// background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
		width: 100%;
		height: 45%;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.card-other {
		background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
	}
}

.pickup-button {
	margin: 0 30rpx 0rpx;
	height: 150rpx;

	image {
		width: 100%;
		height: 100%;
		filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.3));
	}
	transition: transform 0.3s ease;
	&:active {
		transform: scale(0.95);
	}
}

.footer {
	text-align: center;
	padding: 30rpx 30rpx;

	.copyright {
		color: #ffffff;
		font-size: 24rpx;
		opacity: 0.8;
	}
}
</style>
